<template>
  <div class="modal-content-container">
    <vuescroll>
      <div class="header zr-row">
        <div class="zr-row-col">
          <label class="title">{{$t('NNqwsiYKNFh8WR5Mvlwed')}}</label>
          <div class="content">
            <Select v-model="stationName">
              <Option
                v-for="item in allStations"
                :key="item.chargeStationName"
                :value="item.chargeStationName"
                >{{ item.chargeStationName }}</Option
              >
            </Select>
          </div>
        </div>
      </div>
      <div v-if="loading"><Spin></Spin></div>
      <div v-else class="content-area">
        <div class="zr-row" v-for="(item, index) in chargeLists" :key="index">
          <div class="zr-row-col">
            <label class="title">{{$t('UkZcfJDaKRWG55pmTXBx9')}}{{ index }}{{$t('69D87nKrD31qWGMnnhBtT')}}<i>&gt;=</i></label>
            <div class="content">
              <TimePicker
                v-model="item.startTime"
                format="HH:mm"
                placeholder="Select time"
                style="width: 112px"
              >
              </TimePicker>
            </div>
          </div>
          <div class="zr-row-col">
            <label class="title">{{$t('UkZcfJDaKRWG55pmTXBx9')}}{{ index }}{{$t('ik63ITfC8oCTQ7CEiblF0')}}<i>&lt;</i></label>
            <div class="content">
              <TimePicker
                v-model="item.endTime"
                format="HH:mm"
                placeholder="Select time"
                style="width: 112px"
              >
              </TimePicker>
            </div>
          </div>
          <div class="zr-row-col">
            <label class="title">{{$t('mxjVG0mP_YUhCgARTbcIG')}}{{ index }}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})</label>
            <div class="content">
              <Input v-model="item.cost" />
            </div>
          </div>
          <div class="zr-row-col btns">
            <div v-if="index === chargeLists.length - 1" class="btn-item-area">
              <Icon type="md-add" @click="add" />
              <Icon type="md-remove" @click="remove(index)" />
            </div>
          </div>
        </div>
      </div>
      <p class="info">
        {{$t('BK3Tbr_ptdHiYI6ZwEc6e')}}
      </p>
      <div class="btn-area">
        <Button @click="close">{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button>
        <Button @click="setted">{{$t('Kg36nCKTEKsaFEKqQntCt')}}</Button>
      </div>
    </vuescroll>
  </div>
</template>

<script>
import { getAgentSelectStationTimeCostData } from '@/api/data2'
import vuescroll from 'vuescroll'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('agent')

export default {
  name: 'period_price',
  components: {
    vuescroll
  },
  props: {
    // chargeName: String,
    // data: Array
  },
  data () {
    return {
      chargeLists: [],
      stationName: '',
      loading: false
    }
  },
  computed: {
    ...mapState(['selectStations', 'allStations'])
  },
  created () {
    this.stationName = this.selectStations.length
      ? this.selectStations[0].chargeStationName
      : ''
  },
  async mounted () {
    if (this.stationName) {
      this.loading = true
      const res = await getAgentSelectStationTimeCostData({
        chargeName: this.stationName
      })
      this.chargeLists = res.data
      this.loading = false
    }
  },
  methods: {
    add () {
      if (this.chargeLists.length === 12) {
        this.$Message.warning(this.$t('T9Oectgdvb4-Hz6oSSBxF') + '12' + this.$t('Ri9XfAg4jv97i_JEK48YK'))
        return
      }
      this.chargeLists.push({
        startTime: '',
        endTime: '',
        cost: ''
      })
    },
    remove (index) {
      if (this.chargeLists.length === 1) {
        this.$Message.warning(this.$t('6rXtpQ9zcM6vWjrU-OIrA') + '1' + this.$t('Ri9XfAg4jv97i_JEK48YK'))
        return
      }
      this.chargeLists.splice(index, 1)
    },
    close () {
      this.$emit('close')
    },
    setted () {}
  }
}
</script>

<style lang="stylus" scoped>
.modal-content-container
  width 100%
  height 350px
  .header.zr-row
    width 100%
    .zr-row-col
      width 50%
      display flex
      .title
        display inline-block
        font-size 12px
        line-height 30px
        white-space nowrap
        width 90px
        padding 5px
      .content
        flex 1
        display inline-block
        padding 5px
  .content-area
    margin 10px 0
    // border 1px solid #ccc
    width 100%
    display flex
    flex-direction column
    justify-content flex-start
    align-items stretch
    .zr-row
      display flex
      .zr-row-col
        border 0px
        border-left 1px solid #ccc
        border-top 1px solid #ccc
        flex 3
        display flex
        .title
          display inline-block
          font-size 12px
          line-height 30px
          white-space nowrap
          width 90px
          padding 5px
          text-align center
        .content
          flex 1
          display inline-block
          padding 5px
          border-left 1px solid #ccc
          text-align center
      .zr-row-col.btns
        flex 1
        border-top 0px
        display flex
        .btn-item-area
          margin auto
          i
            font-size 24px
            cursor pointer
            &:first-child
              margin-right 10px
      &:last-child
        .zr-row-col
          border-bottom 1px solid #ccc
        .zr-row-col.btns
          border-bottom 0px
  .btn-area
    text-align center
    margin 10px 0
    button:first-child
      margin-right 10px
</style>
